<script>
export default {
  data() {
    return {
      formArray: [],
      deviceList: [],
      socket: null
    }
  },
  mounted() {
    this.getFormObject()
    window.sendMsg = this.sendMessage
    this.initSocket()
  },
  beforeDestroy() {
    this.socket.removeEventListener('open', () => {})
    this.socket.removeEventListener('message', () => {})
    this.socket.removeEventListener('close', () => {})
    this.socket.close()
    this.socket = null
  },
  methods: {
    initSocket() {
      this.socket = new WebSocket('ws://localhost:8080')

      this.socket.addEventListener('open', () => {
        console.log('WebSocket连接已建立')
        this.socket.send('Test')
      })

      this.socket.addEventListener('message', (e) => {
        console.log('WebSocket接收到消息', e)
        const json = e['data']
        const data = JSON.parse(json)
        data.forEach(item => {
          this.deviceList.push({
            ...item
          })
        })
        this.$forceUpdate()
      })

      this.socket.addEventListener('close', () => {
        console.log('WebSocket连接已断开')
      })
    },
    getFormObject() {
      const json = localStorage.getItem('formJson')
      const arr = JSON.parse(json)
      arr.forEach(item => {
        this.formArray.push({
          ...item,
          value: null
        })
      })
      console.log(this.formArray)
    },
    sendMessage(json) {
      const arr = JSON.parse(json)
      arr.forEach(item => {
        this.deviceList.push({
          ...item
        })
      })
      this.$forceUpdate()
    },
    handleInputChange(row, itemObject) {
      let hasValueRow = 0
      for (let i = 0; i < itemObject['tableArray'].length; i++) {
        const item = itemObject['tableArray'][i]
        if(item['key'] != null && item['key'] !== '' || item['value'] != null && item['value'] !== '') {
          hasValueRow++
        }
      }
      if(hasValueRow === itemObject['tableArray'].length) {
        itemObject['tableArray'].push({
          key: '',
          value: ''
        })
      }
    },
    handleSave() {
      const obj = {
        formArray: this.formArray,
        deviceList: this.deviceList
      }
      const str = JSON.stringify(obj)
      localStorage.setItem('studentJson', str)
      window.sendMsg = null
      this.$router.push('/score')
    }
  }
}
</script>

<template>
  <div class="student-container">
    <div class="student-header">
      <h4 style="color: #989898;">{{ $locale('formMaking.StudentView.Form Name: Form Name') }}</h4>
      <el-button type="primary" size="small" @click="handleSave">{{ $locale('formMaking.StudentView.save') }}</el-button>
    </div>
    <div class="student-body">
      <div class="student-form">
        <div class="student-form-header">
          <h4 style="color: #989898;">{{ $locale('formMaking.StudentView.Form Editing') }}</h4>
        </div>
        <div class="student-form-body">
          <el-form label-position="top">
            <template v-for="(item, index) in formArray">
              <el-form-item v-if="item['isFormElement']" :label="item['label']" :key="index">
                <el-input v-if="item['type'] === 'input'" v-model="item['value']" :placeholder="item['placeholder']" size="small" />
                <el-input v-if="item['type'] === 'textarea'" type="textarea" v-model="item['value']" :placeholder="item['placeholder']" :rows="3" size="small" />
                <el-select v-if="item['type'] === 'select'" v-model="item['value']" :placeholder="item['placeholder']" size="small">
                  <el-option v-for="(selectSource, selectSourceIndex) in item['sources']" :key="'option_' + selectSourceIndex" :label="selectSource['label']" :value="selectSource['value']" />
                </el-select>
                <el-radio-group v-if="item['type'] === 'radio'" v-model="item['value']" size="small">
                  <el-radio v-for="(radioSource, radioSourceIndex) in item['sources']" :key="'radio_' + radioSourceIndex" :label="radioSource['value']">{{ radioSource['label'] }}</el-radio>
                </el-radio-group>
                <table class="table" v-if="item['type'] === 'table'" style="width: 100%;" cellspacing="0" cellpadding="0" border="0">
                  <tr>
                    <th>
                      <span>{{ $locale('formMaking.StudentView.column name') }}</span>
                    </th>
                    <th>
                      <span>{{ $locale('formMaking.StudentView.List answers') }}</span>
                    </th>
                  </tr>
                  <tr v-for="(row, rowIndex) in item['tableArray']" :key="'table_row_' + rowIndex">
                    <td>
                      <el-input v-model="row['key']" @change="handleInputChange(row, item)" />
                    </td>
                    <td>
                      <el-input v-model="row['value']" @change="handleInputChange(row, item)" />
                    </td>
                  </tr>
                </table>
              </el-form-item>
              <p v-if="!item['isFormElement']">{{ item['content'] }}</p>
            </template>
          </el-form>
        </div>
      </div>
      <div class="student-socket">
        <div class="student-socket-header">
          <h4 style="color: #989898;">{{ $locale('formMaking.StudentView.Device Data') }}</h4>
        </div>
        <div class="student-socket-body">
          <el-table :data="deviceList" style="width: 100%;">
            <el-table-column :label="$locale('formMaking.StudentView.label')" prop="key" />
            <el-table-column :label="$locale('formMaking.StudentView.price')" prop="value" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.student-container {
  height: 100%;
  padding: 12px;

  .student-header {
    height: 60px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border: 1px solid #d4d4d4;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .student-body {
    height: calc(100% - 60px);
    padding: 12px;
    display: flex;
    justify-content: space-between;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border: 1px solid #d4d4d4;
    border-top: none;

    .student-form {
      width: calc(100% - 292px);
      height: 100%;
      border-radius: 12px;
      border: 1px solid #d4d4d4;

      .student-form-header {
        height: 48px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #d4d4d4;
        padding: 0 12px;
      }

      .student-form-body {
        height: calc(100% - 48px);
        padding: 12px;
        overflow-y: auto;

        .table {
          border: 1px solid #f4f4f4;
          tr {
            td {
              border: 1px solid #f4f4f4;
              padding: 4px 8px;
            }
          }
        }
      }
    }

    .student-socket {
      width: 280px;
      height: 100%;
      border-radius: 12px;
      border: 1px solid #d4d4d4;

      .student-socket-header {
        height: 48px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #d4d4d4;
        padding: 0 12px;
      }

      .student-socket-body {
        height: calc(100% - 48px);
        padding: 12px;
        overflow-y: auto;
      }
    }
  }
}

.c1 {
  color: #3d1111;
}
</style>
